<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<title>Color Admin | Media Object</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	
	<!-- ================== BEGIN BASE CSS STYLE ================== -->
	<link href="assets/public/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
	<link href="assets/public/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	<link href="assets/public/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
	<link href="assets/public/css/animate.min.css" rel="stylesheet" />
	<link href="assets/public/css/style.min.css" rel="stylesheet" />
	<link href="assets/public/css/style-responsive.min.css" rel="stylesheet" />
	<link href="assets/public/css/theme/default.css" rel="stylesheet" id="theme" />
	<!-- ================== END BASE CSS STYLE ================== -->

</head>
<body>
		<!-- begin #content -->
		<div id="content" class="content">
			<!-- begin breadcrumb -->
			<ol class="breadcrumb pull-right">
				<li><a href="javascript:;">Home</a></li>
				<li><a href="javascript:;">UI Elements</a></li>
				<li class="active">Media Object</li>
			</ol>
			<!-- end breadcrumb -->
			<!-- begin page-header -->
			<h1 class="page-header">Media Object <small>header small text goes here...</small></h1>
			<!-- end page-header -->
			
			<!-- begin row -->
			<div class="row">
			    <!-- begin col-6 -->
			    <div class="col-md-6">
			        <!-- begin panel -->
			        <div class="panel panel-inverse" data-sortable-id="ui-media-object-1">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                            <h4 class="panel-title">Default Media Object</h4>
                        </div>
                        <div class="panel-body">
							<div class="media media-sm">
								<a class="media-left" href="javascript:;">
									<img src="assets/public/img/user-1.jpg" alt="" class="media-object" />
								</a>
								<div class="media-body">
									<h4 class="media-heading">Media heading</h4>
									<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
								</div>
							</div>
							<div class="media media-sm">
								<a class="media-left" href="javascript:;">
									<img src="assets/public/img/user-2.jpg" alt="" class="media-object" />
								</a>
								<div class="media-body">
									<h4 class="media-heading">Media heading</h4>
									<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
									<div class="media">
										<a class="pull-left" href="javascript:;">
										    <img src="assets/public/img/user-3.jpg" alt="" class="media-object" />
									    </a>
										<div class="media-body">
											<h4 class="media-heading">Nested media heading</h4>
											<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
										</div>
									</div>
								</div>
							</div>
							<div class="media media-sm">
								<a class="media-left" href="javascript:;">
									<img src="assets/public/img/user-4.jpg" alt="" class="media-object" />
								</a>
								<div class="media-body">
									<h4 class="media-heading">Media heading</h4>
									<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
								</div>
							</div>
							<div class="media media-sm">
								<a class="media-left" href="javascript:;">
									<img src="assets/public/img/user-10.jpg" alt="" class="media-object" />
								</a>
								<div class="media-body">
									<h4 class="media-heading">Media heading</h4>
									<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
								</div>
							</div>
						</div>
                    </div>
			        <!-- end panel -->
				</div>
			    <!-- end col-6 -->
			    <!-- begin col-6 -->
			    <div class="col-md-6">
			        <!-- begin panel -->
			        <div class="panel panel-inverse" data-sortable-id="ui-media-object-2">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                            <h4 class="panel-title">Media List</h4>
                        </div>
                        <div class="panel-body">
			                <ul class="media-list">
								<li class="media media-sm">
									<a class="media-left" href="javascript:;">
									    <img src="assets/public/img/user-5.jpg" alt="" class="media-object rounded-corner" />
									</a>
									<div class="media-body">
										<h4 class="media-heading">Media heading</h4>
										<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
										<div class="media media-sm">
											<a class="media-left" href="javascript:;">
									            <img src="assets/public/img/user-6.jpg" alt="" class="media-object rounded-corner" />
											</a>
										    <div class="media-body">
												<h4 class="media-heading">Nested media heading</h4>
												<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
												<div class="media">
													<a class="media-left" href="javascript:;">
									                    <img src="assets/public/img/user-7.jpg" alt="" class="media-object rounded-corner" />
													</a>
													<div class="media-body">
														<h4 class="media-heading">Nested media heading</h4>
														<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
													</div>
												</div>
											</div>
										</div>
										<div class="media">
											<a class="media-left" href="javascript:;">
									            <img src="assets/public/img/user-8.jpg" alt="" class="media-object rounded-corner" />
											</a>
											<div class="media-body">
												<h4 class="media-heading">Nested media heading</h4>
												<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
											</div>
										</div>
									</div>
								</li>
								<li class="media media-sm">
									<a class="media-right" href="javascript:;">
									    <img src="assets/public/img/user-9.jpg" alt="" class="media-object rounded-corner" />
									</a>
									<div class="media-body">
										<h4 class="media-heading">Media heading</h4>
										<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
									</div>
								</li>
							</ul>
						</div>
					</div>
			        <!-- end panel -->
			    </div>
			    <!-- end col-6 -->
			</div>
			<!-- end row -->
			<!-- begin row -->
			<div class="row">
			    <!-- begin col-6 -->
			    <div class="col-md-6">
			        <!-- begin panel -->
			        <div class="panel panel-inverse" data-sortable-id="ui-media-object-3">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                            <h4 class="panel-title">Media Object Sizes</h4>
                        </div>
                        <div class="panel-body">
							<div class="media media-lg">
								<a class="media-left" href="javascript:;">
									<img src="assets/public/img/gallery/gallery-1.jpg" alt="" class="media-object" />
								</a>
								<div class="media-body">
									<h4 class="media-heading">Media heading</h4>
									Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
								</div>
							</div>
							<div class="media">
								<a class="media-left" href="javascript:;">
									<img src="assets/public/img/gallery/gallery-2.jpg" alt="" class="media-object" />
								</a>
								<div class="media-body">
									<h4 class="media-heading">Media heading</h4>
									Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
								</div>
							</div>
							<div class="media media-sm">
								<a class="media-left" href="javascript:;">
									<img src="assets/public/img/gallery/gallery-3.jpg" alt="" class="media-object" />
								</a>
								<div class="media-body">
									<h4 class="media-heading">Media heading</h4>
									Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
								</div>
							</div>
							<div class="media media-xs">
								<a class="media-left" href="javascript:;">
									<img src="assets/public/img/gallery/gallery-4.jpg" alt="" class="media-object" />
								</a>
								<div class="media-body">
									<h4 class="media-heading">Media heading</h4>
									Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
								</div>
							</div>
						</div>
                    </div>
			        <!-- end panel -->
				</div>
			    <!-- end col-6 -->
			    <!-- begin col-6 -->
			    <div class="col-md-6">
			        <!-- begin panel -->
			        <div class="panel panel-inverse" data-sortable-id="ui-media-object-4">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                            <h4 class="panel-title">Media List with Button</h4>
                        </div>
                        <div class="panel-body">
			                <ul class="media-list media-list-with-divider">
								<li class="media media-sm">
									<a class="media-left" href="javascript:;">
									    <img src="assets/public/img/user-5.jpg" alt="" class="media-object rounded-corner" />
									</a>
									<div class="media-body">
										<h4 class="media-heading">Media heading</h4>
										<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, tempus viverra turpis.</p>
									    <p>
									        <a href="javascript:;" class="btn btn-sm btn-danger m-r-5">Reject</a>
									        <a href="javascript:;" class="btn btn-sm btn-default">Cancel</a>
									    </p>
									</div>
								</li>
                                <li class="media media-sm">
                                    <div class="media-body text-right">
                                        <h4 class="media-heading">Nested media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,  tempus viverra turpis.</p>
                                        <p>
									        <a href="javascript:;" class="btn btn-sm btn-success m-r-5">Published</a>
									        <a href="javascript:;" class="btn btn-sm btn-default">Cancel</a>
									    </p>
                                    </div>
                                    <a class="media-right" href="javascript:;">
                                        <img src="assets/public/img/user-6.jpg" alt="" class="media-object rounded-corner" />
                                    </a>
                                </li>
                                <li class="media media-sm">
                                    <a class="media-left" href="javascript:;">
                                        <img src="assets/public/img/user-8.jpg" alt="" class="media-object rounded-corner" />
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Nested media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, tempus viverra turpis.</p>
                                        <p>
									        <a href="javascript:;" class="btn btn-sm btn-primary m-r-5">Confirm</a>
									        <a href="javascript:;" class="btn btn-sm btn-default">Cancel</a>
									    </p>
                                    </div>
                                </li>
								<li class="media media-sm">
                                    <div class="media-body text-right">
                                        <h4 class="media-heading">Nested media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,  tempus viverra turpis.</p>
                                        <p>
									        <a href="javascript:;" class="btn btn-sm btn-warning m-r-5">Edit</a>
									        <a href="javascript:;" class="btn btn-sm btn-default">Cancel</a>
									    </p>
                                    </div>
                                    <a class="media-right" href="javascript:;">
                                        <img src="assets/public/img/user-7.jpg" alt="" class="media-object rounded-corner" />
                                    </a>
								</li>
							</ul>
						</div>
					</div>
			        <!-- end panel -->
				</div>
			    <!-- end col-6 -->
			</div>
			<!-- end row -->
		</div>
		<!-- end #content -->
		

		<!-- begin scroll to top btn -->
		<a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
		<!-- end scroll to top btn -->

	
	<!-- ================== BEGIN BASE JS ================== -->
	<script src="assets/public/plugins/jquery/jquery-1.9.1.min.js"></script>
	<script src="assets/public/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
	<script src="assets/public/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
	<script src="assets/public/plugins/bootstrap/js/bootstrap.min.js"></script>
	<!--[if lt IE 9]>
		<script src="assets/public/crossbrowserjs/html5shiv.js"></script>
		<script src="assets/public/crossbrowserjs/respond.min.js"></script>
		<script src="assets/public/crossbrowserjs/excanvas.min.js"></script>
	<![endif]-->
	<script src="assets/public/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/public/plugins/jquery-cookie/jquery.cookie.js"></script>
	<!-- ================== END BASE JS ================== -->
	
	<!-- ================== BEGIN PAGE LEVEL JS ================== -->
	<script src="assets/public/js/ui-modal-notification.demo.js"></script>
	<script src="assets/public/js/apps.min.js"></script>
	<!-- ================== END PAGE LEVEL JS ================== -->
	
	<script>
		$(document).ready(function() {
			App.init();
		});
	</script>
 
</body>
</html>
